<template>
  <el-dialog
    :title="!regUser.id ? '新增' : '修改'"
    :close-on-click-modal="true"
    :visible.sync="visible"
    @close="dialogClose"
  >
    <div id="reg" style="text-align: -webkit-center">
      <el-form
        :model="regUser"
        :rules="rules"
        ref="regUser"
        label-width="auto"
        class="regUser"
        style="width: max-content"
      >
        <el-form-item label="姓  名：" prop="user">
          <el-input
            v-model="regUser.user"
            placeholder="用户姓名(中文)"
          ></el-input>
        </el-form-item>

        <el-form-item label="邮  箱：" prop="email">
          <el-input
            v-model="regUser.email"
            placeholder="用户的骏伯公司邮箱"
          ></el-input>
          <div style="margin-top: 5px; font-size: 5px; color: red;">
            注：请注意核对，如错误会影响@人告警无法告出！！！
          </div>
        </el-form-item>

        <el-form-item label="手机号：" prop="phone">
          <el-input
            v-model="regUser.phone"
            maxlength="11"
            placeholder="用户手机号"
          ></el-input>
        </el-form-item>

        <el-form-item label="用户名：" prop="username">
          <el-input v-model="regUser.username" placeholder="用户名"></el-input>
        </el-form-item>

        <el-form-item label="密  码：" prop="password">
          <el-input
            v-model="regUser.password"
            type="password"
            placeholder="密码"
          ></el-input>
        </el-form-item>

        <el-form-item label="用户角色：" prop="nickname">
          <el-select v-model="regUser.nickname" placeholder="请选择用户角色">
            <el-option
              v-for="item in selOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单权限：" prop="menuIds">
          <el-cascader
            :options="options"
            :props="props"
            v-model="regUser.menuIds"
            collapse-tags
            clearable
          ></el-cascader>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" v-if="button" @click="submitForm('regUser')"
            >立即新增</el-button
          >
          <el-button
            type="primary"
            v-if="!button"
            @click="submitForm('regUser')"
            >提交修改</el-button
          >
          <el-button @click="resetForm('regUser')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import Crypto from '@/utils/crypto';
export default {
  data() {
    return {
      visible: false,
      button: true,
      options: [],
      props: { multiple: true },
      message: '新增',
      regUser: {
        username: '',
        password: '',
        email: '',
        user: '',
        phone: '',
        nickname: '',
        userType: '',
        menuIds: null
      },
      selOption: [
        { label: '管理员', value: 0 },
        { label: '后端开发', value: 1 },
        { label: '前端开发', value: 2 },
        { label: '大数据开发', value: 3 },
        { label: '测试', value: 4 },
        { label: '产品', value: 5 },
        { label: 'PMO', value: 6 },
        { label: '分析师', value: 7 },
        { label: '其他', value: 8 }
      ],
      userTeamOption: [],
      rules: {
        user: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { validator: this.inputChinese }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: this.inputPhone }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        nickname: [
          { required: true, message: '请选择用户角色', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    roleChange() {
      this.$forceUpdate();
    },
    async getMenu() {
      const params = {};
      let res = await this.$api.userApi.getAllMenu(params);
      if (res.code == 200) {
        this.options = res.data;
      }
    },
    init(id) {
      if (id) {
        this.regUser.id = id;
        this.message = '修改';
      } else {
        this.regUser.id = null;
      }
      this.visible = true;
      this.$nextTick(async () => {
        if (id) {
          this.button = false;
          let requestData = {
            id: id
          };
          let res = await this.$api.userApi.getUserInfo(this.regUser, {
            loadingTime: 100,
            loadingText: '数据执行中...'
          });
          if (res.menuIds) {
            res.menuIds = JSON.parse(res.menuIds);
          }
          this.regUser = res;
          this.regUser.password = Crypto.decryptDes(res.password);
        } else {
          this.message = '新增';
          this.resetForm('regUser');
          this.button = true;
        }
      });
    },
    submitForm(regUser) {
      this.$refs[regUser].validate(async valid => {
        if (valid) {
          let res;
          if (this.button) {
            res = await this.$api.userApi.insertUser(this.regUser, {
              loadingTime: 100,
              loadingText: '数据执行中...'
            });
          } else {
            res = await this.$api.userApi.updateUser(this.regUser, {
              loadingTime: 100,
              loadingText: '数据执行中...'
            });
          }
          if (res.code == 200) {
            await this.$messageIndex.Notice(
              '成功',
              '用户' + this.message + '成功',
              'success'
            );
            this.visible = false;
            this.$emit('refresh');
          } else {
            this.$messageIndex.Notice(
              '错误',
              '用户' + this.message + '失败',
              'error',
              '0'
            );
          }
        } else {
          return false;
        }
      });
    },
    dialogClose(regUser) {
      if (this.$refs.regUser) {
        this.$refs.regUser.resetFields();
      }
    },
    inputChinese(rule, value, callback) {
      const title = /^[\u2E80-\u9FFF]+$/;
      if (!title.test(value)) {
        callback(new Error('姓名只能是中文'));
      } else {
        callback();
      }
    },
    inputPhone(rule, value, callback) {
      const phone = /0?(13|14|15|18|17|19|16)[0-9]{9}/;
      if (!phone.test(value)) {
        callback(new Error('请输入正确手机号'));
      } else {
        callback();
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
#reg {
  text-align: left;
}
.regUser {
  .el-form-item {
    .el-input {
      width: 300px;
    }
    .el-select {
      width: 300px;
    }
    .el-cascader {
      width: 300px;
    }
  }
}
</style>
